﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Kanban, jqxKanban, Kanban method" />
    <meta name="description" content="This page represents the help documentation of the jqxKanban widget." />
    <title>jqxKanban API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {

            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties
        </h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>columnRenderer</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets a custom rendering function for jqxKanban's columns.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <pre><code>
$('#jqxKanban').jqxKanban({
    resources: resourcesAdapterFunc(),
    source: dataAdapter2,
    columns: [
        { text: "Ready", dataField: "ready", maxItems: 10 }
    ],
    // render column headers.
    columnRenderer: function (element, collapsedElement, column) {
        var columnItems = $("#kanban2").jqxKanban('getColumnItems', column.dataField).length;
        // update header's status.
        element.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
        // update collapsed header's status.
        collapsedElement.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
    }
});                  
                        </code></pre>
                        <br />
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-columnrenderer-property">columnRenderer is set to a custom function.</a>
                        </div>
</div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>columns</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxKanban columns.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <pre><code>
$('#jqxKanban').jqxKanban({
    width: 600,
    height: 500,
    resources: resourcesAdapterFunc(),
    source: dataAdapter,
    columns: [
        { text: "Backlog", dataField: "new", maxItems: 5 },
        { text: "In Progress", dataField: "work", maxItems: 5 },
        { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
    ]
});                    
                        </code></pre>
                        <br />
                        Column Properties:

                        <ul>
                            <li>text - sets the text in column's header.</li>
                            <li>dataField - sets the column datafield.</li>
                            <li>maxItems - sets maximum number of items per column.</li>
                            <li>collapsible - determines whether the column can be collapsed or not.</li>
                            <li>collapseDirection - determines the column's collapse direction - "left" or "right".</li>
                            <li>headerElement - gets the header element of the column after the widget is created.</li>
                            <li>collapsedHeaderElement - gets the collapsed header element of the column after the widget is created.</li>
                            <li>iconClassName - sets the class name of the header element's icon.</li>
                         </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">columns is set to columns array.</a>
                        </div>
</div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>connectWith</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets a connection to another jqxKanban widget. As a selector is used the id of the widget.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>connectWith</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({connectWith: '#jqxKanban2'});</code></pre>
                        <p>
                            Get the <code>connectWith</code> property.
                        </p>
                        <pre><code>var connectWith = $('#jqxKanban').jqxKanban('connectWith'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-connectwith-property">connectWith is set to '#jqxKanban2'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>headerHeight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the height of the jqxKanban column headers when columns are expanded.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>headerHeight</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({ headerHeight: 50 }); </code></pre>
                        <p>
                            Get the <code>autoClose</code> property.
                        </p>
                        <pre><code>var headerHeight = $('#jqxKanban').jqxKanban('headerHeight'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-header-properties">headerHeight is set to 30</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>headerWidth</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the width of the jqxKanban column headers when columns are collapsed.
                        </p>
                        <b>Possible Values:</b>
                        <br />

                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>headerWidth</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({headerWidth : 50}); </code></pre>
                        <p>
                            Get the <code>headerWidth</code> property.
                        </p>
                        <pre><code>var headerWidth = $('#jqxKanban').jqxKanban('headerWidth'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-header-properties">headerWidth is set to 50</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>height</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the kanban's height.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({height: 500});</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxKanban').jqxKanban('height');</code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-header-properties">height is set to 500</a>
                        </div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>itemRenderer</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This function is called when an item is being rendered.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>itemRenderer</code> property.
                        </p>
                        <pre><code>
$('#kanban1').jqxKanban({
    resources: resourcesAdapterFunc(),
    source: dataAdapter,
    itemRenderer: function(element, item, resource)
    {
        $(element).find(".jqx-kanban-item-color-status").html(resource.name);
    },
    columns: [
        { text: "Backlog", iconClassName: getIconClassName(), dataField: "new" },
        { text: "In Progress", iconClassName: getIconClassName(), dataField: "work" },
        { text: "Done", iconClassName: getIconClassName(), dataField: "done" }
    ]
});                        
                        </code></pre>
                        <p>
                            Get the <code>ready</code> property.
                        </p>
                        <pre><code>var ready = $('#jqxKanban').jqxKanban('ready'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-item-template">itemRenderer is set to 'function(){...}'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>ready</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This function is called when the jqxKanban is initialized and the binding is completed.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>ready</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({ ready: function(){ // Some code here. } }); </code></pre>
                        <p>
                            Get the <code>ready</code> property.
                        </p>
                        <pre><code>var ready = $('#jqxKanban').jqxKanban('ready'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-ready-property">ready is set to 'function(){...}'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({ rtl: true }); </code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxKanban').jqxKanban('rtl'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-rtl-property-1">rtl is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>source</span>
                </td>
                <td>
                    <span>Array/Object</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The source object represents a set of key/value pairs. Every set is a jqxKanban item.</p>
                        
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>source</code> property.
                        </p>
                        <pre><code>
var fields = [
            { name: "id", type: "string" },
            { name: "status", map: "state", type: "string" },
            { name: "text", map: "label", type: "string" },
            { name: "tags", type: "string" },
            { name: "color", map: "hex", type: "string" },
            { name: "resourceId", type: "number" }
];

var source =
    {
        localData: [
                { id: "1161", state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                { id: "1645", state: "work", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
                { id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3 },
                { id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 },
                { id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49" }
        ],
        dataType: "array",
        dataFields: fields
    };

var dataAdapter = new $.jqx.dataAdapter(source);                   
                        </code></pre>
                        <br />
                        Source item Properties:

                        <ul>
                            <li>id - unique identifier of the item. This property is required!</li>
                            <li>status - sets the column where the item will be stored. Associated to column's dataField property. This property is required!</li>
                            <li>text - sets the item's text. </li>
                            <li>content - sets the content area. Could be filled with text/images/widgets etc.</li>
                            <li>tags - sets taggs stored in item footer div.</li>
                            <li>color - sets unique status color of the item.</li>
                            <li>resourceId - contains resource id, associated to some resource from resources property.</li>
                            <li>className - sets individual css class about item.</li>
                        </ul>
                        <p>
                            Get the <code>source</code> property.
                        </p>
                        <pre><code>var source = $('#jqxKanban').jqxKanban('source'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">source is set to a dataAdapter instance.</a>
                        </div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>resources</span>
                </td>
                <td>
                    <span>Array/Object</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            The resources object represents a set of key/value pairs.
                            It contains information about items, associated to the jqxKanban cards.
                        </p>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>resources</code> property.
                        </p>
                        <pre><code>
var fields = [
        { name: "id", type: "string" },
        { name: "status", map: "state", type: "string" },
        { name: "text", map: "label", type: "string" },
        { name: "tags", type: "string" },
        { name: "color", map: "hex", type: "string" },
        { name: "resourceId", type: "number" }
];

var source =
{
    localData: [
            { id: "1161", state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
            { id: "1645", state: "work", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
            { id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3 },
            { id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 },
            { id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49" }
    ],
    dataType: "array",
    dataFields: fields
};

var dataAdapter = new $.jqx.dataAdapter(source);

var resourcesAdapterFunc = function () {
    var resourcesSource =
    {
        localData: [
                { id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
                { id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
                { id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
                { id: 3, name: "Steven Buchanan", image: "../../images/steven.png" },
                { id: 4, name: "Nancy Davolio", image: "../../images/nancy.png" },
                { id: 5, name: "Michael Buchanan", image: "../../images/Michael.png" },
                { id: 6, name: "Margaret Buchanan", image: "../../images/margaret.png" },
                { id: 7, name: "Robert Buchanan", image: "../../images/robert.png" },
                { id: 8, name: "Laura Buchanan", image: "../../images/Laura.png" },
                { id: 9, name: "Laura Buchanan", image: "../../images/Anne.png" }
        ],
        dataType: "array",
        dataFields: [
                { name: "id", type: "number" },
                { name: "name", type: "string" },
                { name: "image", type: "string" },
                { name: "common", type: "boolean" }
        ]
    };

    var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
    return resourcesDataAdapter;
}

$('#kanban').jqxKanban({
width: 600,
height: 500,
resources: resourcesAdapterFunc(),
source: dataAdapter,
columns: [
    { text: "Backlog", dataField: "new", maxItems: 5 },
    { text: "In Progress", dataField: "work", maxItems: 5 },
    { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
]
});                      
                        </code></pre>
                        <br />
                        Resource item Properties:

                        <ul>
                            <li>id - unique identifier of the resource.</li>
                            <li>name - name of the resource.</li>
                            <li>image - image of the resource.</li>
                        </ul>
                        <p>
                            Get the <code>resources</code> property.
                        </p>
                        <pre><code>var resources = $('#jqxKanban').jqxKanban('resources'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">resources is set to dataAdapter instance.</a>
                        </div>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>template</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Sets or gets new HTML structure about kanban's cards.</p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>template</code> property.
                        </p>
                        <pre><code>
$('#jqxKanban').jqxKanban({template : "&lt;div class='jqx-kanban-item' id=''&gt;"
        + "&lt;div class='jqx-kanban-item-color-status'&gt;&lt;/div&gt;"
        + "&lt;div class='jqx-kanban-item-avatar'&gt;&lt;/div&gt;"
        + "&lt;div class='jqx-kanban-item-text'&gt;&lt;/div&gt;"
        + "&lt;div class='jqx-kanban-item-footer'&gt;&lt;/div&gt;"
        + "&lt;/div&gt;";
}); 
                            </code></pre>
                        <p>
                            Get the <code>template</code> property.
                        </p>
                        <pre><code>var template = $('#jqxKanban').jqxKanban('template'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template-property">template is set to a custom html structure</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>templateContent</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the default values about kanban's cards. 
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>templateContent</code> property.
                        </p>
                        <pre><code>
                            var templateContent = { status: "new", text: "New text", content: "New content", tags: "New, taggs", color: "green", resourceId: 0, className: ""},
                            $('#jqxKanban').jqxKanban({ templateContent: templateContent }); 
                            </code></pre>
                        <p>
                            Get the <code>templateContent</code> property.
                        </p>
                        <pre><code>var selector = $('#jqxKanban').jqxKanban('templateContent'); </code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template-content-property">templateContent is set to a custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.
                        </p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                        In order to set a theme, you need to do the following:
                        <ul>
                            <li>
                                Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                            </li>
                            <li>
                                Set the widget's theme property to 'energyblue' when you initialize it.
                            </li>
                        </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-theme-property">theme is set to 'arctic'</a>
                        </div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>width</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    600
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the kanban's width.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxKanban').jqxKanban({width:850});</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxKanban').jqxKanban('width');</code></pre>
                        <div style="padding-bottom:5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">width is set to 600</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events
                    </h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>columnAttrClicked</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when jqxKanban column is clicked.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>columnAttrClicked</code> event by type: jqxKanban.
                        </p>
                        <pre><code>
$('#jqxKanban').on('columnAttrClicked', function (event) {
    var args = event.args;
    var column = args.column;
    var cancelToggle = args.cancelToggle; // false by default. Set to true to cancel toggling dynamically.
    var attribute = args.attribute; // title, button
});
                         </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the columnAttrClicked event by type: jqxKanban.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>columnCollapsed</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when jqxKanban column is collapsed.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>columnCollapsed</code> event by type: jqxKanban.
                        </p>
                        <pre><code>
$('#jqxKanban').on('columnCollapsed', function (event) { 
    var args = event.args;
    var column = args.column;
}); 
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the columnCollapsed event by type: jqxKanban.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>columnExpanded</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when jqxKanban column is expanded.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>columnExpanded</code> event by type: jqxKanban.
                        </p>
<pre><code>
$('#jqxKanban').on('columnCollapsed', function (event) { 
    var args = event.args;
    var column = args.column;
}); 
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the columnExpanded event by type: jqxKanban.</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>itemAttrClicked</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when some element of an item is clicked.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>itemAttrClicked</code> event by type: jqxKanban.
                        </p>
<pre><code>
$('#jqxKanban').on('itemAttrClicked', function (event) {
    var args = event.args;
    var itemId = args.itemId;
    var attribute = args.attribute; // template, colorStatus, content, keyword, text, avatar
});
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the itemAttrClicked event by type: jqxKanban.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>itemMoved</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when an item is moved.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>itemMoved</code> event by type: jqxKanban.
                        </p>
<pre><code>
$('#kanban').on('itemMoved', function (event) {
    var args = event.args;
    var itemId = args.itemId;
    var oldParentId = args.oldParentId;
    var newParentId = args.newParentId;
    var itemData = args.itemData;
    var oldColumn = args.oldColumn;
    var newColumn = args.newColumn;
});
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the itemMoved event by type: jqxKanban.</a>
                        </div>
                    </div>
                </td>
            </tr>
          
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods
                    </h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>addItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Add new item in widget.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>newItem</em></td>
                                        <td><em>Object</em></td>
                                        <td><em>
                                            The content of the new jqxKanban item.<br />
                                            newItem.status - String, newItem.text - String, newItem.content - String, newItem.tags - String, newItem.color - String, newItem.resourceId - String, newItem.className - String</em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>None</em>
                        </div>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>addItem</code> method.
                        </p>
                        <pre><code>
var newItem = { status: "new", text: "Cookies", content: "Content", tags: "cookies", color: "lightgreen", resourceId: 1 };
$('#jqxKanban').jqxKanban('addItem', newItem); 
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">add new item</a>
                        </div>
                    </div>
                </td>
            </tr>   
                  <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Add new item in widget.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>None</em></td>
                                        <td><em></em></td>
                                        <td><em></em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>None</em>
                        </div>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>
$('#jqxKanban').jqxKanban('destroy'); 
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-destroy-method">destroys the jqxKanban</a>
                        </div>
                    </div>
                </td>
            </tr>     
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>getColumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Returs all items as an array of objects.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>dataField</em></td>
                                        <td><em>String</em></td>
                                        <td><em></em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>Object</em>
                        Column Properties:

                        <ul>
                            <li>text - sets the text in column's header.</li>
                            <li>dataField - sets the column datafield.</li>
                            <li>maxItems - sets maximum number of items per column.</li>
                            <li>collapsible - determines whether the column can be collapsed or not.</li>
                            <li>collapseDirection - determines the column's collapse direction - "left" or "right".</li>
                            <li>headerElement - gets the header element of the column after the widget is created.</li>
                            <li>collapsedHeaderElement - gets the collapsed header element of the column after the widget is created.</li>
                            <li>iconClassName - sets the class name of the header element's icon.</li>
                         </ul>
                       </div>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>getColumn</code> method.
                        </p>
                        <pre><code>
var column = $('#jqxKanban').jqxKanban('getColumn', 'work'); 
                            </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-getcolumn-method">get the column</a>
                        </div>
                    </div>
                </td>
            </tr>                
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>getColumnItems</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Returs all items as an array of objects.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>dataField</em></td>
                                        <td><em>String</em></td>
                                        <td><em></em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>Array</em> <em>
                                            The content of the each jqxKanban item in the Array.<br />
                                            item.status - String, item.text - String, item.content - String, item.tags - String, item.color - String, item.resourceId - Number, item.className - String</em>
                        </div>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>getColumnItems</code> method.
                        </p>
                        <pre><code>
var items = $('#jqxKanban').jqxKanban('getColumnItems'); 
                            </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-getcolumnitems-method">get the items</a>
                        </div>
                    </div>
                </td>
            </tr>      
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>getItems</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Returs all items as an array of objects.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>None</em></td>
                                        <td><em></em></td>
                                        <td><em></em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>Array</em> <em>
                                            The content of the each jqxKanban item in the Array.<br />
                                            item.status - String, item.text - String, item.content - String, item.tags - String, item.color - String, item.resourceId - Number, item.className - String</em>
                        </div>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>getItems</code> method.
                        </p>
                        <pre><code>
var items = $('#jqxKanban').jqxKanban('getItems'); 
                            </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-getitems-method">get the items</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>removeItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes an item.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>itemId</em></td>
                                        <td><em>Stirng</em></td>
                                        <td><em>Id of the item, which must be removed </em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>None</em>
                        </div>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>removeItem</code> method.
                        </p>
                        <pre><code>
$('#jqxKanban').jqxKanban('removeItem', "1236");
                            </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">removes an item</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>updateItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Update an item.
                        </p>

                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>itemId</em></td>
                                        <td><em>Stirng</em></td>
                                        <td><em>Id of the item which content must be replaced</em></td>
                                    </tr>
                                    <tr>
                                        <td><em>newContent</em></td>
                                        <td><em>Object</em></td>
                                        <td><em>
                                            The new content of the updated kanban's card.<br/>
                                            newContent.status - String, newContent.text - String, newContent.content - String, newContent.tags - String, newContent.color - String, newContent.resourceID - String, newContent.className - String</em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>None</em>
                        </div>

                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>updateItem</code> method.
                        </p>
                        <pre><code>
var itemId = '12354';
var newContent = { text: "Cookies", content: "Content", tags: "cookies", color: "lightgreen", resourceId: 1, className: "standard" };
$('#jqxKanban').jqxKanban('updateItem', itemId, newContent); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">update an item</a>
                        </div>
                    </div>
                </td>
            </tr>

        </table>
        <br />
    </div>
</body>
</html>